<!--
 * @Author: 胡俊/treence
 * @Date: 2022-05-11 14:59:15
 * @LastEditors: 黄宇/Hyuishine
 * @LastEditTime: 2024-05-16 14:53:40
 * @Description: 
 * @Email: treence@gmail.com
 * @Company: 3xData
 * @youWant: add you want
-->
<template>
  <view class="body">
    <!--导航栏-->
    <action-bar :options="navOptions" />
    <view class="reportSign">
      <uni-section title="报告信息" type="line">
        <view class="formItem">
          <view class="label">项目负责人</view>
          <input class="content" disabled v-model="form.projectHeadName" />
        </view>

        <view class="formItem">
          <view class="label">现场操作人</view>
          <view class="content">{{ form.staffName }}</view>
        </view>

        <view class="formItem">
          <view class="label">报告生效日期</view>
          <input class="content" disabled v-model="form.reportDate" />
        </view>
      </uni-section>

      <uni-section :title="`服务对象${item.name}`" type="line" v-for="(item, i) in form.projectServeList" :key="i">
        <view class="formItem">
          <view class="label">建筑物(场所)名称</view>
          <input class="content" disabled v-model="item.name" />
        </view>
        <view class="formItem">
          <view class="label">建筑物(场所)类别</view>
          <input class="content" disabled placeholder="类型" v-model="item.type" />
        </view>
        <view class="formItem" v-if="item.type == '工业（厂房、仓库）' || item.type == '工业（装置、储罐）' || item.type == '堆场'">
          <view class="label">最高火灾危险性</view>
          <input class="content" disabled v-model="item.maxFireRisk" />
        </view>
        <view class="formItem" v-if="item.type == '民用' || item.type == '工业（厂房、仓库）'">
          <view class="label">建筑总层数</view>
          <span class="content">地上{{ item.upLayer || 0 }}层，地下{{ item.lowLayer || 0 }}层</span>
        </view>
        <view class="formItem" v-if="item.type == '民用' || item.type == '工业（厂房、仓库）'">
          <view class="label">技术服务活动所在建筑面积(㎡)</view>
          <input class="content" disabled v-model="item.areaSize" />
        </view>
        <view class="formItem" v-if="item.type == '民用' || item.type == '工业（厂房、仓库）'">
          <view class="label">维保(检测)楼层或部位</view>
          <input class="content" disabled v-model="item.detectionFloor" />
        </view>
        <view class="formItem" v-if="item.type == '民用' || item.type == '工业（厂房、仓库）'">
          <view class="label">消防技术服务活动面积(㎡)</view>
          <input class="content" disabled v-model="item.totalSize" />
        </view>
      </uni-section>

      <!--附件-->
      <uni-section title="附件" type="line">
        <view class="file" @click="downLoad">
          <image mode="widthFix" class="pdf" :src="baseImgUrl + '/reportSign/pdf.png'" />
        </view>
      </uni-section>

      <uni-section title="反馈信息" type="line">
        <view class="formItem">
          <view class="label">是否看过</view>
          <view class="content">
            <radio :checked="radioFlag" @click="radioClick" :disabled="sign !== 'null'" style="transform: scale(0.7)" />
            <span style="margin-left: 5px">我已看过</span>
          </view>
        </view>

        <view class="formItem_double">
          <view class="title">意见</view>
          <textarea class="textarea" placeholder="请填写" :disabled="sign !== 'null'"
            placeholder-style="font-size: 28rpx;font-family: Source Han Sans CN;font-weight: 400;color: #C1C1C1;line-height: 36rpx;"
            v-model="submitForm.opinion" />
        </view>

        <view class="formItem">
          <view class="label">业主签字</view>
          <view style="flex-direction: row; display: flex;width: 100%" :class="sign != 'null' ? 'noneClick' : ''"
            @click="goSign">
            <!-- <input class="content" disabled :placeholder="signFlag ? '已录入' : '未录入'" /> -->
            <view class="content" :style="{ color: signFlag ? '#333' : '#999' }">{{ signFlag ? '已录入' : '未录入' }}</view>
            <image mode="widthFix" class="icon" :src="baseImgUrl + '/myZone/decorate_titleArrow.png'" />
          </view>
        </view>
        <!-- <image mode="widthFix" class="signImage" v-if="signFlag" :src="getUrl(submitForm.sign)" /> -->
      </uni-section>

      <view style="height: 100rpx;"></view>
      <!--业主签字-->
      <!-- <view class="sign">
        <view class="formItem" :class="sign != 'null' ? 'noneClick' : ''" @click="goSign">
          <view class="label">业主签字</view>
          <input class="content" disabled :placeholder="signFlag ? '已录入' : '未录入'" />
          <image mode="widthFix" class="icon" :src="baseImgUrl + '/myZone/decorate_titleArrow.png'" />
        </view>
        <image mode="widthFix" class="signImage" v-if="signFlag" :src="getUrl(submitForm.sign)" />
      </view> -->

      <view class="btn" @click="submit" v-if="sign == 'null'">
        <view>提交</view>
      </view>
    </view>
  </view>
</template>
<script>
import {
  baseApiUrl,
  baseImgUrl
} from "@/config.js";
import { mapState } from "vuex";
export default {
  data() {
    return {
      baseApiUrl: baseApiUrl,
      baseImgUrl: baseImgUrl,
      signFlag: false, // 签字状态
      radioFlag: false, // 单选按钮是否选中
      navOptions: {
        // 导航栏配置参数
        statusBar: "dark",
        left: {
          icon: "back",
        },
        center: {
          title: "消防技术服务报告签收",
        },
      },
      // 保存的表单
      submitForm: {
        reportId: "",
        opinion: "",
        backState: "1", // 反馈状态
        backDate: new Date().toLocaleString('zh-CN', {
          year: 'numeric',
          month: '2-digit',
          day: '2-digit',
          hour: '2-digit',
          minute: '2-digit',
          second: '2-digit',
          hour12: false
        }).replace(/\//g, '-'), // 反馈时间
        sign: "",
      },
      form: {},
      reportId: null,
      sign: null, // 通过该字段判断是否已经被签收
      code: null,
      loading: false,
    };
  },
  onLoad(options) {
    if (options.hasOwnProperty('q') && options.q) {
      let url = decodeURIComponent(options.q)
      let urlCode = url.split('=');
      this.reportId = urlCode[1]
      this.getForm();
    }
    if (options.hasOwnProperty("reportId") && options.reportId) {
      this.sign = options?.sign || 'null'
      this.$store.commit('set_sign', this.sign)
      this.reportId = options.reportId
      this.getForm();
    }
  },
  onShow: function () {
    // 如果业主完成签名
    if (this.fileUrl) {
      this.submitForm.sign = this.fileUrl;
    }
  },
  computed: {
    ...mapState('reportSign', ['fileUrl']),
  },
  methods: {
    // 判断是否完成签名录入
    getFormSign() {
      if (this.submitForm.sign) {
        this.signFlag = true;
      } else {
        this.signFlag = false;
      }
    },
    // 获取url
    getUrl(url) {
      if (url) {
        return baseApiUrl + url;
      }
    },
    // 获取表单
    getForm() {
      if (this.loading) return

      this.loading = true
      uni.showLoading({
        title: '正在加载请稍后',
        mask: true
      });
      let that = this;
      this.$store
        .dispatch("reportSign/reportSign_form", this.reportId)
        .then((res) => {
          that.code = res.code
          if (res.code == 200) {
            this.$store.dispatch("reportSign/reportUnitInfos").then((dist) => {
              if (dist.data) {
                that.form = res.data;
                // 获取文件和报告日期
                if (res.data.reportList) {
                  that.form.fileUrl = res.data.reportList[0].fileUrl;
                  that.form.reportDate = res.data.reportList[0].createTime;
                  that.submitForm.backState = res.data.reportList[0].backState;
                  that.submitForm.reportId = res.data.reportList[0].reportId;
                  if (res.data.reportList[0].sign) {
                    that.submitForm.sign = res.data.reportList[0].sign;
                    that.radioFlag = true;
                  }
                  if (res.data.reportList[0].opinion) {
                    that.submitForm.opinion = res.data.reportList[0].opinion;
                  }
                  if (that.form.reportDate) {
                    that.form.reportDate = that.form.reportDate.substring(
                      0,
                      10
                    );
                  }
                }
              } else {
                uni.showToast({
                  icon: "none",
                  title: "当前账号非社会单位人员!",
                  duration: 2000,
                });
                uni.reLaunch({
                  url: "../../pages/layout/index",
                });
              }
            }).finally(() => {
              this.loading = false
              uni.hideLoading();
            })
          } else {
            uni.showToast({
              icon: "none",
              title: "当前账号未登录，请先登录!",
              duration: 2000,
            });
            that.$store.commit('set_reportId', that.reportId)
            setTimeout(() => {
              uni.reLaunch({
                url: "../../pages/login/login?url=" +
                  '/pages_workTableChild/reportSign/index',
              })
            }, 1000)
          }
        });
    },
    // 确定
    submit() {
      if (!this.radioFlag || this.submitForm.sign == "") {
        uni.showToast({
          icon: "error",
          title: "请完成勾选和签字",
          duration: 2000,
        });
      } else {
        if (this.loading) return

        this.loading = true
        uni.showLoading({
          title: '正在加载请稍后',
          mask: true
        });

        this.$store
          .dispatch("reportSign/reportSign_update", this.submitForm)
          .then((res) => {
            if (res.code == 200) {
              this.$store.commit('set_sign', null)
              uni.showToast({
                icon: "success",
                title: "签收成功",
                duration: 2000,
              });
              uni.reLaunch({
                url: "../../pages/layout/index",
              });
            } else {
              uni.showToast({
                icon: "error",
                title: "签收失败",
                duration: 2000,
              });
            }
          }).finally(() => {
            let timer = setTimeout(() => {
              this.loading = false
              uni.hideLoading();
              clearTimeout(timer)
            }, 3000);
          })
      }
    },
    // 单选框选中
    radioClick() {
      this.radioFlag = !this.radioFlag;
    },
    // 去签字
    goSign() {
      uni.navigateTo({
        url: "../../pages_workTableChild/reportSign/sign",
        success: () => { },
      });
    },
    // 下载
    downLoad() {
      // 将需要预览的文件下载下来，成功后预览该文件
      if (this.form.fileUrl) {
        uni.downloadFile({
          url: baseApiUrl + "/profile/" + this.form.fileUrl, //文件路径
          success: (res) => {
            if (res.statusCode === 200) {
              uni.openDocument({
                filePath: res.tempFilePath,
                success: (res) => console.log("成功打开文件"),
              });
            }
          },
        });
      } else {
        uni.showToast({
          icon: "error",
          title: "附件为空",
          duration: 2000,
        });
      }
    },
  },
  watch: {
    // 监听签名
    "submitForm.sign": {
      handler(val) {
        // 如果有值
        if (val) {
          this.signFlag = true;
        } else {
          this.signFlag = false;
        }
      },
      deep: true,
      immediate: true,
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/styles/variables.scss";

::v-deep .uni-section {
  margin-top: 0;
  background: transparent;
}

.body {
  width: 100%;
  height: 100%;
  background: #f4f5f5;
}

.reportSign {
  // padding-bottom: 100rpx;
  width: 100%;
  min-height: calc(100% - 80rpx);
  background: $OVERALL_SITUATION_BACKGROUND_GRADIENT;

}

.formItem,
.formItem_double {
  display: flex;
  margin-top: 10rpx;
  background: #ffffff;
  border-radius: 20rpx;
  width: calc(100% - 40rpx);
  min-height: 110rpx;
  margin: 0 auto 24rpx;
  padding: 24rpx;
}

.formItem {
  align-items: center;

  .label {
    width: 60%;
    font-size: 28rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #333333;
    line-height: 36rpx;
  }

  .content {
    flex: 1;
    text-align: right;
    font-size: 28rpx
  }

  .icon {
    width: 20rpx;
    margin-left: 20rpx
  }
}

.formItem_double {
  flex-direction: column;
  justify-content: flex-start;

  .textarea {
    width: 100%;
    padding: 20rpx;
    font-size: 28rpx;
    margin-top: 20rpx;
  }
}

.signImage {
  width: calc(100% - 40rpx);
  background-color: #fff;
  margin-left: 20rpx
}

.service {
  margin-top: 25rpx;
  background: #ffffff;
  border-radius: 20rpx;
  padding: 40rpx 24rpx;

  .title {
    font-size: 30rpx;
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: #333333;
    line-height: 36rpx;
  }
}

.file {
  background: #ffffff;
  border-radius: 20rpx;
  width: calc(100% - 40rpx);
  margin: 0 auto 24rpx;
  padding: 24rpx;

  .pdf {
    width: 100rpx;
    height: 150rpx
  }
}


.textarea {
  width: 702rpx;
  height: 130rpx;
  background: #f4f5f5;
  border-radius: 5rpx;
}

.sign {
  margin-top: 25rpx;
  background: #ffffff;
  border-radius: 20rpx;
  padding: 40rpx 24rpx;

  .formItem {
    display: flex;
    align-items: center;
    margin-top: 10rpx;

    .label {
      width: 60%;
      font-size: 28rpx;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #333333;
      line-height: 36rpx;
    }

    .content {
      flex: 1;
      text-align: right;
    }
  }
}

.btn {
  margin-top: 25rpx;
  width: 100%;
  position: fixed;
  height: 100rpx;
  bottom: 0;
  background-color: #fff;

  &>view {
    height: 80rpx;
    border-radius: 10rpx;
    background: $OVERALL_SITUATION_BACKGROUND;
    margin: 10rpx auto;
    width: calc(100% - 40rpx);
    text-align: center;
    line-height: 80rpx;
    font-size: 32rpx;
    color: #ffffff;
  }
}




.service-info {
  margin-top: 25rpx;
  background: #ffffff;
  border-radius: 20rpx;
  padding: 40rpx 24rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.noneClick {
  pointer-events: none;
}
</style>
